<template>
    <div class="meizi-type" ref="boxRef">
        <div class="sub-title">媒资类别占比</div>
        <div id="pie-chart" ref="pieChartRef"></div>
    </div>
</template>

<script setup lang="ts">
    import { useResizeObserver } from "@/hooks/useResize";
    import echarts from "@/echarts";
    import { MediaType } from "@/type/workBench";
    const props = defineProps<{
        data: any;
    }>();
    let dataArr: any[] = [];
    const option: any = {
        tooltip: {
            trigger: "item",
            formatter: ({ name, value, data }: any) => {
                return `${name} : ${(value * 100).toFixed(2)}%  ${data.count}`;
            },
        },
        grid: {
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
        },
        legend: {
            type: "scroll",
            top: "center",
            left: "0%",
            orient: "vertical",
            icon: "circle",
            itemGap: 8,
            backgroundColor: "#F7F8FA",
            padding: 20,
            borderRadius: 8,
            textStyle: {
                fontSize: 14,
                color: "#6F7885",
                rich: {
                    b: {
                        padding: [0, 0, 0, 24],
                        width: 50,
                    },
                    a: {
                        width: 50,
                        color: "#3A414D",
                        fontWeight: 700,
                    },
                    c: {
                        padding: [0, 0, 0, 24],
                    },
                },
            },
            formatter: (name: string) => {
                let { value, count } = dataArr.find(
                    (item) => item.name == name,
                );
                let showVal = (value * 100).toFixed(2);
                return `{a|${name}} {b|${showVal}%} {c|${count}}`;
            },
        },
        color: [
            "#2D51A0",
            "#30C793",
            "#F34F51",
            "#F19E1D",
            "#64C6D6",
            "#EDEFF2",

            "#95A4FC",
            "#B1E3FF",
            "#BAEDBD",
            "#303133",
            "#9ADBC5",
            "#FC8C6E",
            "#FDC453",
            "#F986AA",
        ],
        series: [
            {
                type: "pie",
                radius: ["50%", "70%"],
                center: ["82%", "45%"],
                avoidLabelOverlap: false,

                label: {
                    show: false,
                    position: "center",
                },
                data: [],
            },
        ],
    };
    const boxRef = ref<HTMLElement>();
    const pieChartRef = ref<HTMLElement>();
    // onMounted(() => {
    //     init();
    // });

    onUpdated(() => {
        let data = props.data;
        let arr = data.map((item: any) => {
            let obj: any = {};
            obj["name"] = MediaType[item.mainType];
            obj["value"] = item.proportion;
            obj["count"] = item.count;
            return obj;
        });
        dataArr = arr;
        if (Array.isArray(option.series)) {
            option.series[0].data = arr;
        }
        pieChart = echarts.init(pieChartRef.value, "myTheme");
        pieChart.setOption(option);
    });
    let pieChart: any;

    const hdlResize = () => {
        pieChart && pieChart.resize();
    };

    useResizeObserver(".page", hdlResize);
</script>

<style lang="scss" scoped src="./MeiziPieChart.scss"></style>
